var chartDom_o = document.getElementById("operation");
var myChart_o = echarts.init(chartDom_o);
var option_o;
//当前选择 周 或者 月
var choiceOperationDate;
//防止刷新
let operationDate = window.sessionStorage.getItem("operationDate");
if (operationDate == "周") {
  choiceOperationDate = 0;
  $("#operation_content").text("周");
} else if (operationDate == "月") {
  choiceOperationDate = 1;
  $("#operation_content").text("月");
} else {
  choiceOperationDate = 0;
}
//请求
function getoperation() {
  $.ajax({
    url: baseUrl + "/operationLog",
    type: "POST",
    dataType: "json",
    data: {
      type: choiceOperationDate, //1本月 0本周
    },
    success: (data) => {
      operationData(data.data);
    },
    // 超时时间
    timeout: 4000,
    // 失败的回调
    error: function () {
      clearInterval(interval);
      alert("设备操作记录请求数据失败！");
    },
  });
}
//获取数据
function operationData(res) {
  let operation_x = res.data.map((item) => {
    //x轴
    return item.name;
  });
  let operation_y = res.data.map((item) => {
    //y轴
    return item.num;
  });
  operationEcharts(operation_x, operation_y);
  operationList(res.all);
}
//echarts 数据渲染
function operationEcharts(operation_x, operation_y) {
  option_o = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "none",
        label: {
          backgroundColor: "#6a7985",
        },
      },
    },
    grid: {
      left: "5%",
      top: "13%",
      bottom: "25%",

      right: "5%",
    },
    containLabel: true,
    xAxis: {
      axisLabel: {
        color: "#3C9BC4",
      }, //x轴字体颜色
      type: "category",
      data: operation_x,
      axisTick: {
        show: false,
      }, //Y轴超出
    },
    yAxis: {
      color: "#E5E6EB",
      type: "value",
      splitLine: {
        lineStyle: {
          type: "dashed", //虚线
          opacity: 0.2,
        },
      },
    },
    series: [
      {
        data: operation_y,
        type: "bar",
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0,
              1,
              0,
              0,
              [
                {
                  offset: 0,
                  color: "rgba(22, 93, 255, 0)", // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "#0FC6C2", // 100% 处的颜色
                },
              ],
              false
            ),
          },
        },
      },
    ],
  };
  myChart_o.setOption(option_o);
}
//列表数据
function operationList(list) {
  $("#operation_list>ul").empty(); //清楚列表数据
  list.forEach((item) => {
    $("#operation_list>ul").append(`<li>
      <div>${item.createtime}</div>
      <div>${item.department_name}</div>
      <div>${item.equipment.id}</div>
      <div>${item.equipment.name}</div>
      <div>${item.equipment.marking}</div>
      </li>`);
  });

  $(function () {
    if (list.length > 3) {
      setInterval('autoScrollB("#operation_list")', 2000);
    }
  });
}
//列表滚动动画
function autoScrollB(obj) {
  $(obj)
    .find("ul")
    .animate(
      {
        marginTop: "-1.875rem",
      },
      500,
      function () {
        $(this).css({ marginTop: "0px" }).find("li:first").appendTo(this);
      }
    );
}
/* 选择周或者月 */
$(".operation_week li").each(function () {
  $(this).click(function () {
    $("#operation_content").text($(this).text());
    window.sessionStorage.setItem("operationDate", $(this).text());
    if ($(this).text() == "周") {
      choiceOperationDate = 0;
      getoperation();
    } else {
      choiceOperationDate = 1;
      getoperation();
    }
  });
});

window.addEventListener("resize", function () {
  myChart_o.resize();
});
